<template>
  <div class="mainbody">
    <el-row class="topheader">
      <span style="line-height: 52px;font-size: 24px;">HJTM智慧猪场运营平台</span>
    </el-row>
    <el-row :gutter="10" style="padding: 10px 5px;">
      <el-col :span="6">
        <div class="custom-box" style="height: 430px;border: 1px solid rgba(0, 169, 251, 0.5)">
          <div slot="header" class="clearfix" style="height: 32px;background:rgba(1,74,145,1);color: #04fff9;">
            <span style="line-height: 32px;padding-left: 10px;">生产信息</span>
          </div>
          <div class="text item">
            <ul class="ul-list">
              <li>1、生产信息xxxxxxx</li>
              <li>2、生产信息xxxxxxx</li>
            </ul>
          </div>
        </div>
        <div id="total_stock_box" class="custom-box"
             style="height: 540px;border: 1px solid rgba(0, 169, 251, 0.5);margin-top: 10px;">
          <div slot="header" class="clearfix" style="height: 32px;background:rgba(1,74,145,1);color: #04fff9;">
            <span style="line-height: 32px;padding-left: 10px;">存栏统计</span>
          </div>
          <div class="text item">
            <div id="total_stock" style="width: 100%;height: 240px;"></div>
            <div id="total_stock_pie" style="width: auto;height: 240px;margin-left: 20%;"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="custom-box"
             style="height: 160px;border: 1px solid rgba(0, 169, 251, 0.5);position: relative;">
          <div slot="header" class="clearfix" style="height: 32px;background:rgba(1,74,145,1);color: #04fff9;">
            <span style="line-height: 32px;padding-left: 10px;">统计</span>
          </div>
          <div style="color: white;display: flex;justify-content: space-around; width: 100%;align-items: center;height: 128px;">
            <div style="display: flex;flex-direction: column;text-align: center">
              <span class="" style="color: #ffff01;font-size: 26px;">200382</span>
              <span class="fan"
                    style="text-align: center;color: rgba(0, 169, 251, 1);line-height: 32px;">总成交额</span>
            </div>
            <div style="display: flex;flex-direction: column;text-align: center">
              <span class="" style="color: #fff;font-size: 26px;">11</span>
              <span class="fan"
                    style="text-align: center;color: rgba(0, 169, 251, 1);line-height: 32px;">当前租户数量</span>
            </div>
            <div style="display: flex;flex-direction: column;text-align: center">
              <span class="" style="color: white;font-size: 26px;">32000</span>
              <span class="fan" style="text-align: center;color: rgba(0, 169, 251, 1);line-height: 32px;">总存栏</span>
            </div>
            <!--              <img style="height: 52px;" src="../../../../public/img/center_bg_line.png"/>-->
            <div style="display: flex;flex-direction: column;text-align: center">
              <span class="" style="color: white;font-size: 26px;">4500</span>
              <span class="fan"
                    style="text-align: center;color: rgba(0, 169, 251, 1);line-height: 32px;">今日进场</span>
            </div>
            <!--              <img style="height: 52px;" src="../../../../public/img/center_bg_line.png"/>-->
            <div style="display: flex;flex-direction: column;text-align: center">
              <span class="" style="color: white;font-size: 26px;">6400</span>
              <span class="fan"
                    style="text-align: center;color: rgba(0, 169, 251, 1);line-height: 32px;">今日出栏</span>
            </div>
            <div style="display: flex;flex-direction: column;text-align: center">
              <span class="" style="color: white;font-size: 26px;">12.4</span>
              <span class="fan"
                    style="text-align: center;color: rgba(0, 169, 251, 1);line-height: 32px;">生猪价格</span>
            </div>
          </div>
        </div>
        <div class="custom-box"
             style="height: 810px;border: 1px solid rgba(0, 169, 251, 0.5);margin-top:10px;">
          <div slot="header" class="clearfix" style="height: 32px;background:rgba(1,74,145,1);color: #04fff9;">
            <span style="line-height: 32px;padding-left: 10px;">租户分布</span>
          </div>
          <div style="position: relative;">
<!--            <baidu-map id="allmap" class="bm-view" :map-style="mapStyle" auto-resize scroll-wheel-zoom :center="center" :zoom="zoom"-->
<!--                       ak="hmr2lLGC3qSDSzygLbksMlljShTbLsnk">-->
<!--            </baidu-map>-->
            <div id="allmap" class="bm-view"></div>
            <div style="width: 60%;position: relative;" class="map-bottom">
              <div slot="header" class="clearfix hd">
                <span style="line-height: 32px;padding-left: 10px;">猪场信息</span>
              </div>
              <div class="custom-table-map">
                <table>
                  <tr>
                    <td>区域</td>
                    <td>存栏</td>
                    <td>租户数</td>
                  </tr>
                  <tr>
                    <td>河南省</td>
                    <td>123123</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>山东省</td>
                    <td>12</td>
                    <td>11</td>
                  </tr>
                  <tr>
                    <td>河北省</td>
                    <td>12</td>
                    <td>12</td>
                  </tr>
                  <tr>
                    <td>安徽省</td>
                    <td>12</td>
                    <td>11</td>
                  </tr>
                  <tr>
                    <td>广东省</td>
                    <td>12</td>
                    <td>11</td>
                  </tr>
                  <tr>
                    <td>北京市</td>
                    <td>12</td>
                    <td>11</td>
                  </tr>
                  <tr>
                    <td>江苏省</td>
                    <td>12</td>
                    <td>21</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="custom-box"
             style="height: 460px;border: 1px solid rgba(0, 169, 251, 0.5);">
          <div slot="header" class="clearfix" style="height: 32px;background:rgba(1,74,145,1);color: #04fff9;">
            <span style="line-height: 32px;padding-left: 10px;">生态展示</span>
          </div>
          <div class="text item">
            <div id="partner_chart" style="width: 100%;height: 420px;margin-left: 15%;"></div>
          </div>
        </div>
        <div id="total_sale_box" class="custom-box" style="height: 510px;border: 1px solid rgba(0, 169, 251, 0.5);margin-top: 10px;">
          <div slot="header" class="clearfix" style="height: 32px;background:rgba(1,74,145,1);color: #04fff9;">
            <span style="line-height: 32px;padding-left: 10px;">交易信息</span>
          </div>
          <div class="custom-table">
            <table>
              <tr>
                <td>成交时间</td>
                <td>成交额(万元)</td>
                <td>交易客户</td>
              </tr>
              <tr>
                <td>2020-09-10</td>
                <td>23</td>
                <td>21</td>
              </tr>
              <tr>
                <td>2020-09-10</td>
                <td>11</td>
                <td>21</td>
              </tr>
              <tr>
                <td>2020-09-10</td>
                <td>5</td>
                <td>21</td>
              </tr>
              <tr>
                <td>2020-09-10</td>
                <td>11</td>
                <td>21</td>
              </tr>
            </table>
            <div id="total_sale" style="width: 100%;height: 240px;"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-footer class="custom-footer">
      <p style="font-size: 16px;color: rgba(0, 169, 251, 0.5);">HJTM智慧猪场运营平台</p>
    </el-footer>
    <div class="time">
      <p>当前时间</p>
      <p>{{ date }}</p>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import _ from "underscore"
// custom components
import $ from 'jquery'
import * as echarts from 'echarts';
//import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BaiduMap from 'vue-baidu-map';
export default {
  data() {
    return {
      stockChart: '',
      stockPieChart: '',
      saleChart: '',
      partnerChart: '',
      value: true,
      src1: '/img/circle_bg.png',
      src2: '/img/fengji-3.png',
      engine: '/img/fan.png',
      date: new Date(),
      mode: 'view',
      dashboardId: '',
      dashboards: [],
      widgetOption: '{"type": "circle","startArg": 0,"endArg": 6.283185307179586,"colorType": "stepMultiple","min": 0,"max": 100,"value": 70,"showValue": true,"tickWidthPercent": 0.1 }',
      lineOption: {
        "grid": {"left": "5%", "top": "15%", "right": "10%", "bottom": "10%", "containLabel": true},
        "xAxis": {
          axisLabel: {show: true, textStyle: {color: "#83bff6"}},
          "type": "category",
          "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        "yAxis": {axisLabel: {show: true, textStyle: {color: "#83bff6"}}, "type": "value",
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#315070'],
              width: 1,
              type: 'solid'
            }
          }},
        "series": [
          { // For shadow
            type: 'bar',
            itemStyle: {
              color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: [],
            animation: false
          },{
          "data": [820, 932, 901, 934, 1290, 1330, 1320],
          "type": "bar",
          "smooth": true,
          "areaStyle": {"color": "#3FA7DC"},
          "lineStyle": {"color": "#3FA7DC"},
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#2378f7'},
                      {offset: 0.7, color: '#2378f7'},
                      {offset: 1, color: '#83bff6'}
                    ]
                )
              }
            },
          "label": {"normal": {"show": true, "position": "top", "textStyle": {"color": "#83bff6", "fontSize": 12}}}
        }]
      },
      saleOption: {
        "grid": {"left": "5%", "top": "15%", "right": "5%", "bottom": "5%", "containLabel": true},
        "xAxis": {
          axisLabel: {show: true, textStyle: {color: "#83bff6"}},
          "type": "category",
          "data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        },
        "yAxis": {axisLabel: {show: true, textStyle: {color: "#83bff6"}}, "type": "value",
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#315070'],
              width: 1,
              type: 'solid'
            }
          }},
        "series": [
          { // For shadow
            type: 'line',
            itemStyle: {
              color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: [],
            animation: false
          },{
            "data": [820, 932, 901, 934, 1290, 1330, 1320, 1420, 1520, 1620, 1720, 1920],
            "type": "line",
            "smooth": true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#2378f7'},
                      {offset: 0.7, color: '#2378f7'},
                      {offset: 1, color: '#83bff6'}
                    ]
                )
              }
            },
            "label": {"normal": {"show": true, "position": "top", "textStyle": {"color": "#83bff6", "fontSize": 12}}}
          }]
      },
      stockPieOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['公猪', '母猪', '仔猪'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '统计',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 335, name: '公猪'},
              {value: 310, name: '母猪'},
              {value: 234, name: '仔猪'}
            ]
          }
        ]
      },
      partnerOption:{
        title: {
          subtext: '生态伙伴统计',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['屠宰场', '兽药厂', '饲料厂', '养猪场'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 23,
                name: '屠宰场'
              },
              {value: 43, name: '兽药厂'},
              {value: 22, name: '饲料厂'},
              {value: 67, name: '养猪场'}
            ],
            label: {
              normal: {
                position: "inside"//此处将展示的文字在内部展示
              }
            }
          }
        ]
      }
    }
  },
  watch: {},
  components: {BaiduMap},
  mounted() {
    let _this = this;
    window.onload = window.onresize = function () {
      _this.bodyScale();
    };
    this.totalStock();
    this.totalStockPie();
    this.totalSale();
    this.partner();
    //this.center = {lng: 112.617043, lat: 34.747745};
    //this.zoom = 5
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(106.404, 39.915), 5);
    map.enableScrollWheelZoom();
    var MAX = 10;
    var markers = [];
    var pt = null;
    var i = 0;
    for (; i < MAX; i++) {
      pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
      markers.push(new BMap.Marker(pt));
    }
    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
  },
  created() {
    this.dashboardId = this.$route.query.id
    // 监听echart上层div尺寸变化，图表 resize
    var elementResizeDetectorMaker = require("element-resize-detector");//导入
    // 创建实例
    this.erd = elementResizeDetectorMaker();
    // this.getDashInfo()
    //
  },
  beforeDestroy: function () {
  },
  destoryed() {

  },
  methods: {
    getDashInfo() {
      this.$http.get(`/dash/dashboardgroup/` + this.dashboardId).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dashboards = res.data
      }).catch(() => {
      })
    },
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth;
      var deviceheight = document.documentElement.clientHeight;
      var scale = deviceheight / 1100;  // 分母——设计稿的尺寸
      document.body.style.zoom = scale;
      //
      var that = this;
      if (this.erd) {
        this.erd.listenTo(document.getElementById("total_stock_box"), function (element) {
          that.stockChart.resize()
        })
        this.erd.listenTo(document.getElementById("total_sale_box"), function (element) {
          that.saleChart.resize()
        })
      }
    },
    totalStock() {
      var that = this;
      var option = {};
      var obj = document.getElementById('total_stock');
      this.stockChart = echarts.init(obj);
      var option = this.lineOption;
      this.stockChart.setOption(option)
    },
    totalStockPie() {
      var that = this;
      var option = {};
      var obj = document.getElementById('total_stock_pie');
      this.stockPieChart = echarts.init(obj);
      var option = this.stockPieOption;
      this.stockPieChart.setOption(option)
    },
    totalSale() {
      var that = this;
      var option = {};
      var obj = document.getElementById('total_sale');
      this.saleChart = echarts.init(obj);
      var option = this.saleOption;
      this.saleChart.setOption(option)
    },
    partner() {
      var that = this;
      var option = {};
      var obj = document.getElementById('partner_chart');
      this.partnerChart = echarts.init(obj);
      var option = this.partnerOption;
      this.partnerChart.setOption(option)
    }
  }
}
</script>
<style scoped>
.el-row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.mainbody {
  background: url('../../../assets/img/das/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;overflow-x: hidden;
}

.topheader {
  height: 52px;
  background: url('../../../assets/img/das/topbg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  text-align: center;
  color: white;
}

.custom-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 52px !important;
  background: url('../../../assets/img/das/footer.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  text-align: center;
}

.time {
  position: absolute;
  left: 15px;
  top: 3px;
  color: #04fff9;
  font-size: 14px;
  text-align: left;
  line-height: 0.4em;

}

.fans {
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  vertical-align: center;
  padding: 10px;
  border: 1px solid rgba(0, 169, 251, 0.5);
}

.fans .imgs {
  width: 32px;
}

.fans .fan {
  line-height: 32px;
}

.ani-fan {
  display: block;
  animation: rotate 6s linear infinite;
}

.bm-view {
  width: 100%;
  height: 775px;
}

.ul-list {
  list-style-type: none;
  color: white;
  padding: 0px 15px;
}

.ul-list li {
  border-bottom: 1px solid rgba(0, 169, 251, 0.2);
  line-height: 32px;
}

.custom-table {
  color: white;
  padding: 10px;
}

.custom-table table {
  width: 100%;
}

.custom-table tr {
  line-height: 32px;
}

.custom-table tr td {
  border-bottom: 1px solid rgba(0, 169, 251, 0.3);
}

.custom-table-map {
  width: 45%;
  color: white;
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.5);
  height: 200px;
  overflow: scroll;
  overflow-x: hidden;
}

.custom-table-map table {
  padding: 10px;
  width: 100%;
}

.custom-table-map tr td {
  height: 34px;
}

.custom-table-map tr td {
  border-bottom: 1px solid rgba(0, 169, 251, 0.5);
}

.map-bottom .hd {
  height: 32px;
  background: rgba(1, 74, 145, 0.8);
  color: #04fff9;
  position: absolute;
  bottom: 205px;
  left: 5px;
  width: 45%;
}

::-webkit-scrollbar {
  width: 0px !important;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg); /*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg); /*360度结束*/
  }
}

.mainbody /deep/ .anchorBL {
  display: none !important;
}
</style>
